<style lang="less" scoped>
</style>
<template>
  <div style="display: flex;justify-content: center">
    <el-row :span="24">
      <el-col :span="6">
    <div >
      <el-table :data="provinceData" @row-click="provinceClick" highlight-current-row border height="800" >
        <el-table-column prop="name" label="状态" min-width="140px" ></el-table-column>
        <el-table-column label="操作" min-width="220px">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isOpen !== null && scope.row.isOpen === 111002001"  type="warning"
                       @click="isOpenHandle(scope.row,111002002,'关闭开通',scope.row.level)">关闭开通
            </el-button>
            <el-button v-if="scope.row.isOpen === null || scope.row.isOpen === 111002002"  type="primary"
                       @click="isOpenHandle(scope.row,111002001,'启用开通',scope.row.level)">启用开通
            </el-button>
            <el-button v-if="scope.row.isAboutToOpen !== null && scope.row.isAboutToOpen === 111002001"
                       type="warning"
                       @click="isAboutToOpenHandle(scope.row,111002002,'关闭即将开通',scope.row.level)">关闭即将开通
            </el-button>
            <el-button v-if="scope.row.isAboutToOpen === null || scope.row.isAboutToOpen === 111002002"
                       type="primary"
                       @click="isAboutToOpenHandle(scope.row,111002001,'启用即将开通',scope.row.level)">启用即将开通
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
      </el-col>
      <el-col :span="6">
    <div  style="margin-left: 10px">
    <el-table :data="cityData" @row-click="cityClick" highlight-current-row border max-height="800">
      <el-table-column prop="name" label="状态" min-width="140px" ></el-table-column>
      <el-table-column label="操作" min-width="220px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isOpen !== null && scope.row.isOpen === 111002001"  type="warning"
                     @click="isOpenHandle(scope.row,111002002,'关闭开通',scope.row.level)">关闭开通
          </el-button>
          <el-button v-if="scope.row.isOpen === null || scope.row.isOpen === 111002002"  type="primary"
                     @click="isOpenHandle(scope.row,111002001,'启用开通',scope.row.level)">启用开通
          </el-button>
          <el-button v-if="scope.row.isAboutToOpen !== null && scope.row.isAboutToOpen === 111002001"
                     type="warning"
                     @click="isAboutToOpenHandle(scope.row,111002002,'关闭即将开通',scope.row.level)">关闭即将开通
          </el-button>
          <el-button v-if="scope.row.isAboutToOpen === null || scope.row.isAboutToOpen === 111002002"
                     type="primary"
                     @click="isAboutToOpenHandle(scope.row,111002001,'启用即将开通',scope.row.level)">启用即将开通
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
      </el-col>
      <el-col :span="6">
    <div  style="margin-left: 10px">
      <el-table :data="countryData" @row-click="countyClick" highlight-current-row border max-height="800">
        <el-table-column prop="name" label="状态" min-width="140px" ></el-table-column>
        <el-table-column label="操作" min-width="220px">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isOpen !== null && scope.row.isOpen === 111002001"  type="warning"
                       @click="isOpenHandle(scope.row,111002002,'关闭开通',scope.row.level)">关闭开通
            </el-button>
            <el-button v-if="scope.row.isOpen === null || scope.row.isOpen === 111002002"  type="primary"
                       @click="isOpenHandle(scope.row,111002001,'启用开通',scope.row.level)">启用开通
            </el-button>
            <el-button v-if="scope.row.isAboutToOpen !== null && scope.row.isAboutToOpen === 111002001"
                       type="warning"
                       @click="isAboutToOpenHandle(scope.row,111002002,'关闭即将开通',scope.row.level)">关闭即将开通
            </el-button>
            <el-button v-if="scope.row.isAboutToOpen === null || scope.row.isAboutToOpen === 111002002"
                       type="primary"
                       @click="isAboutToOpenHandle(scope.row,111002001,'启用即将开通',scope.row.level)">启用即将开通
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
      </el-col>
      <el-col :span="6">
    <div style="margin-left: 10px">
      <el-table :data="townData" highlight-current-row border max-height="800">
        <el-table-column prop="name" label="状态" min-width="160px" ></el-table-column>
        <el-table-column label="操作" min-width="220px">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isOpen !== null && scope.row.isOpen === 111002001"  type="warning"
                       @click="isOpenHandle(scope.row,111002002,'关闭开通',scope.row.level)">关闭开通
            </el-button>
            <el-button v-if="scope.row.isOpen === null || scope.row.isOpen === 111002002"  type="primary"
                       @click="isOpenHandle(scope.row,111002001,'启用开通',scope.row.level)">启用开通
            </el-button>
            <el-button v-if="scope.row.isAboutToOpen !== null && scope.row.isAboutToOpen === 111002001"
                       type="warning"
                       @click="isAboutToOpenHandle(scope.row,111002002,'关闭即将开通',scope.row.level)">关闭即将开通
            </el-button>
            <el-button v-if="scope.row.isAboutToOpen === null || scope.row.isAboutToOpen === 111002002"
                       type="primary"
                       @click="isAboutToOpenHandle(scope.row,111002001,'启用即将开通',scope.row.level)">启用即将开通
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {searchAddressDicts, changeIsOpenStatus, changeIsAboutToOpenStatus} from '../../api/system/addressDict';

export default {
  data () {
    return {
      provinceData: [],
      cityData: [],
      countryData: [],
      townData: []
    };
  },

  methods: {
    /**
       * 省行点击方法
       */
    provinceClick (row, event, column) {
      this.getCityData(row.id);
      this.countryData = [];
      this.townData = [];
    },
    /**
       * 城市行点击方法
       */
    cityClick (row, event, column) {
      this.getCountryData(row.id);
      this.townData = [];
    },
    /**
       * 区县行点击方法
       */
    countyClick (row, event, column) {
      this.getTownData(row.id);
    },
    // 获取省份表格数据
    getProvinceData () {
      this.getAddressDicts('EQ_level=1', data => {
        this.provinceData = data;
      });
    },
    // 获取城市表格数据
    getCityData (pid) {
      this.getAddressDicts('EQ_pid=' + pid, data => {
        this.cityData = data;
      });
    },
    // 获取市县区域表格数据
    getCountryData (pid) {
      this.getAddressDicts('EQ_pid=' + pid, data => {
        this.countryData = data;
      });
    },
    // 获取乡镇街道区域表格数据
    getTownData (pid) {
      this.getAddressDicts('EQ_pid=' + pid, data => {
        this.townData = data;
      });
    },
    getAddressDicts (filters, fun) {
      searchAddressDicts({
        filters: filters,
        sort: '',
        page: 0,
        size: 200
      }).then(res => {
        if (res.status === 200) {
          return fun(res.data);
        }
      });
    },
    // 修改开通城市
    isOpenHandle (row, status, btnName, level) {
      this.$confirm('确认 ' + btnName + ' 吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        changeIsOpenStatus(row.id, status).then((res) => {
          console.log(res);
          if (res.status === 200) {
            this.$message.success(btnName + '成功');
            console.log(level);
            if (level === 1) {
              this.getProvinceData();
            } else if (level === 2) {
              this.getCityData(row.pid);
            } else if (level === 3) {
              this.getCountryData(row.pid);
            } else if (level === 4) {
              this.getTownData(row.pid);
            };
          };
        }).catch(function (error) {
          this.$message.error(btnName + '失败');
          console.log(error);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消' + btnName
        });
      });
    },
    // 修改即将开通城市
    isAboutToOpenHandle (row, status, btnName, level) {
      this.$confirm('确认 ' + btnName + ' 吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        changeIsAboutToOpenStatus(row.id, status).then((res) => {
          console.log(res);
          if (res.status === 200) {
            this.$message.success(btnName + '成功');
            if (level === 1) {
              this.getProvinceData();
            } else if (level === 2) {
              this.getCityData(row.pid);
            } else if (level === 3) {
              this.getCountryData(row.pid);
            } else if (level === 4) {
              this.getTownData(row.pid);
            };
          };
        }).catch(function (error) {
          this.$message.error(btnName + '失败');
          console.log(error);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消' + btnName
        });
      });
    }
  },
  // 初始化数据
  mounted () {
    this.getProvinceData();
  }
};
</script>
